/*
 * @Descripttion:
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-11-11 16:38:17
 */
import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { ProDescriptions } from '@ant-design/pro-components';
import { CmdbContent, CmdbHeader } from '@/components';
import ResourceInfo from './resourceInfo';
import ResourceRelation from './resourceRelation';
import ResTopology from '@/modules/topology/resTopology/index';
import ResourceLogs from './resourceLogs';
import '../index.less';
const { TabPane } = Tabs;

const ResourceDetail = ({ history, match, location }) => {
    const cmModuleId = match.params.id;
    const state = location.state;
    const path = '/resource/catalog/list/' + cmModuleId;
    const [info, setInfo] = useState({});
    const [moduleInfo, setModuleInfo] = useState({});

    useEffect(() => {
        setActiveKey('info');
        if (state) {
            setInfo(state.info);
            setModuleInfo(state.moduleData);
        }
    }, [state]);

    const [activeKey, setActiveKey] = useState('info');
    const handleTabOnChange = (tab) => {
        setActiveKey(tab);
    };

    return (
        <CmdbContent>
            <CmdbHeader
                titleList={[
                    { name: '资源目录', pathname: '/resource/catalog' },
                    {
                        name: `${moduleInfo?.moduleName || '-'}`,
                        pathname: path,
                        state: { moduleName: moduleInfo.moduleName },
                    },
                    `${info.cm_name || '-'}`,
                ]}
                showBackButton
                history={history}
                goBackUrl={location?.state?.goBackUrl || path}
                goBackUrlState={{ moduleName: moduleInfo.moduleName }}
            />
            <div className="cmdb_host_pane padding-10">
                <Tabs
                    activeKey={activeKey}
                    size="large"
                    style={{ padding: '5px 0px', margin: 0 }}
                    onChange={handleTabOnChange}
                >
                    <TabPane tab="属性" key="info">
                        <ResourceInfo info={info} history={history} editable={state.editable} />
                    </TabPane>
                    <TabPane tab="关联资源" key="relation">
                        <ResourceRelation
                            history={history}
                            cmModuleId={cmModuleId}
                            cmUnid={info?.cm_unid}
                            moduleInfo={moduleInfo}
                            info={info}
                            visible={activeKey === 'relation'}
                        />
                    </TabPane>
                    <TabPane tab="资源拓扑" key="topo">
                        <ResTopology
                            history={history}
                            cmModuleId={cmModuleId}
                            cmUnid={info?.cm_unid}
                            info={info}
                            visible={activeKey === 'topo'}
                        />
                    </TabPane>
                    <TabPane tab="变更历史" key="log">
                        {activeKey === 'log' && <ResourceLogs cmUnid={info?.cm_unid} />}
                    </TabPane>
                </Tabs>
            </div>
        </CmdbContent>
    );
};

export default ResourceDetail;
